<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <customerInputVue v-model:first-name="first" v-model:last-name="last" /> {{ first }}
    <myEcharts :options="options" class="mycharts"></myEcharts>
  </div>
</template>

<script>

import VScaleScreen from 'v-scale-screen'
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import customerInputVue from '@/components/customer-input.vue'
// import myEcharts from '@/components/myEcharts.vue'
export default {
  name: 'HomeView',
  components: {
    HelloWorld,
    customerInputVue,
    // myEcharts
    VScaleScreen
  },
  data() {
    return {
      first: '',
      last: '',
      options: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: {
            rotate: 45
          }
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          show: true,
          trigger: 'item'
        },
        grid: {
          left: 0,
          right: 0,

          containLabel: true
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      }
    }
  },
  mounted() {
    this.$bus.$emit('test', 'data  of eventbus ')
  },
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    console.log(to,from,"beforeRouterEnter")
    next()
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log(to,from,"beforeRouterEnter")
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    console.log(to,from,"beforeRouterEnter")
  }
}
</script>
<style>
.mycharts {
  height: 200px;
  width: 200px;
}
</style>
